<!--上传插件-->
<script src="/static/js/jquery-2.1.1.js"></script>
<script src="/static/bootstrap/js/bootstrap.js"></script>
<link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>

<link href="/static/layui/css/layui.css" rel="stylesheet"/>
<script src="/static/layui/layui.js"></script>
<!--引用layui弹框插件-->

<script src="/static/js/yii.js"></script>

<link href="/static/css/fileinput.css" rel="stylesheet"/>
<script src="/static/js/fileinput.js"></script>
<script src="/static/js/fileinput_locale_zh.js" type="text/javascript"></script>

<link href="/static/css/default/public.css" rel="stylesheet" type="text/css"/>


<script src="/static/build/tracking-min.js"></script>
<script src="/static/build/data/face-min.js"></script>
<script src="/static/build/data/eye-min.js"></script>
<script src="/static/build/data/mouth-min.js"></script>

<div class="modal-header">

    <div class="assistant_header">
        <button type="button" class="close" data-dismiss="modal" close="true">
            <span aria-hidden="true">×</span>
        </button>
        <h4 class="modal-title">
            <span class="fa fa-legal"></span>&nbsp;人脸录入
        </h4>
    </div>
</div>
<style>
    .faceview{padding-bottom:15px;}
    .faceview-amin{text-align: center;position: relative}
    #video{width:500px;height:300px;border:1px solid #000;margin: auto}

    #canvas{width:250px;height:150px;position: absolute;border:1px solid #000;}
</style>
<div class="modal-body">



    <div class="faceview form-group">

        <div class="row form-group faceview-amin" >
            <div class="col-sm-12 " >

                <canvas id="canvas" ></canvas>

                <video id="video" autoplay="autoplay"></video>
            </div>
        </div>

        <div class="row faceview-amin">
            <div class="col-sm-12" >
                <a href="javascript:;" class="btn-sm btn-primary" id="snap" onclick="takePhoto()">拍照</a>
                <a class="btn-sm btn-primary"  onclick="getMedia()" >开启摄像头</a>
            </div>
        </div>

<!--    <canvas id="canvas" width="300px" height="400px"></canvas>-->

    </div>



    <div class="assistant_button" style="display: block">
        <button type="button" class="btn btn-default btn-sm js_quit" close="true">取消</button>
        <button type="button" class="btn btn-primary btn-sm js_add" _event="user_add" data-id="0" data-name="">保存</button>
    </div>


</div>


<script>


    window.onload = function() {
        var video = document.getElementById('video');
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');

        var tracker = new tracking.ObjectTracker('face');
        tracker.setInitialScale(4);
        tracker.setStepSize(2);
        tracker.setEdgesDensity(0.1);

        tracking.track('#video', tracker, { camera: true });

        tracker.on('track', function(event) {
            context.clearRect(0, 0, canvas.width, canvas.height);

            event.data.forEach(function(rect) {
                context.strokeStyle = '#a64ceb';
                context.strokeRect(rect.x, rect.y, rect.width, rect.height);
                context.font = '11px Helvetica';
                context.fillStyle = "#fff";
                context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11);
                context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22);
            });
        });

        var gui = new dat.GUI();
        gui.add(tracker, 'edgesDensity', 0.1, 0.5).step(0.01);
        gui.add(tracker, 'initialScale', 1.0, 10.0).step(0.1);
        gui.add(tracker, 'stepSize', 1, 5).step(0.1);
    };


    //获得video摄像头区域
    // let video = document.getElementById("video");
    // function getMedia() {
    //     let constraints = {
    //         video: { width: 500, height: 300 },
    //         audio: true
    //     };
    //     /*
    //     这里介绍新的方法:H5新媒体接口 navigator.mediaDevices.getUserMedia()
    //     这个方法会提示用户是否允许媒体输入,(媒体输入主要包括相机,视频采集设备,屏幕共享服务,麦克风,A/D转换器等)
    //     返回的是一个Promise对象。
    //     如果用户同意使用权限,则会将 MediaStream对象作为resolve()的参数传给then()
    //     如果用户拒绝使用权限,或者请求的媒体资源不可用,则会将 PermissionDeniedError作为reject()的参数传给catch()
    //     */
    //     let promise = navigator.mediaDevices.getUserMedia(constraints);
    //
    //     promise.then(function (MediaStream) {
    //         video.srcObject = MediaStream;
    //         video.play();
    //     }).catch(function (PermissionDeniedError) {
    //         console.log(PermissionDeniedError);
    //     })
    // }
    // function takePhoto() {
    //     //获得Canvas对象
    //     let canvas = document.getElementById("canvas");
    //     let ctx = canvas.getContext('2d');
    //     ctx.drawImage(video, 0, 0, 250, 150);
    //     var photoSrc = document.getElementById("canvas").toDataURL("image/jpeg", 0.8);
    //     console.log(photoSrc, 12121)
    // }


</script>